<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/lunbo.css">
</head>
<body>
	<div class="warp">
		<ul class="list"> 
			<li class="item"><img src="img/banner.png" alt=""></li>
			<li class="item"><img src="img/banner2.png" alt=""></li>
			<li class="item active"><img src="img/banner4.png" alt=""></li>
			<li class="item active"><img src="img/banner5.png" alt=""></li>
			<li class="item active"><img src="img/banner6.png" alt=""></li>
			<li class="item  active"><img src="img/banner7.png" alt=""></li>
		</ul>
		<ul class="pointlist">
			<li class="point active" data-index="0"></li>
			<li class="point" data-index="1"></li>
			<li class="point" data-index="2"></li>
			<li class="point" data-index="3"></li>
			<li class="point" data-index="4"></li>
			<li class="point" data-index="5"></li>
		</ul>
		<button class="btn" type="button" id="gopre"></button>
		<button class="btn" type="button" id="gonext"></button>
	</div>
</body>
<script>
	var items=document.getElementsByClassName("item");
	var gopre=document.getElementById("gopre");
	var  gonext=document.getElementById("gonext");
	var points=document.getElementsByClassName("point");
	var index=0;
	var time=0;
	var clearactive=function(){
		for(var i=0;i<items.length;i++){
			items[i].className="item";
		}
		for(var i=0;i<points.length;i++){
			points[i].className="point";
		}
	}
	var goindex=function(){
		clearactive();
		items[index].className="item active";
		points[index].className="point active";
	}
	var goNext=function(){
		if(index<5){
			index++;
		}else{
			index=0
		}
		goindex();
	}
	gonext.addEventListener("click", function(){
		goNext();
	});
	var goPre=function(){
		if(index==0){
			index=4
		}else{
			index--;
		}
		goindex()
	}
	gopre.addEventListener("click",function(){
		goPre();
	});
	for(var i=0;i<points.length;i++){
		points[i].addEventListener("click",function(){
			var pointindex=this.getAttribute("data-index");
			index=pointindex;
			goindex();
			time=0;
		})
	}
	setInterval(function(){
		time++;
		if(time==20){
			time=0;
		}
		goNext();
	},2000)
</script>
</html>